<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta charset="UTF-8">
    <title>发表</title>
    <link rel="stylesheet" href="../css/mui.min.css"/>
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../css/sweetalert2.css"/>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="../css/chat.css"/>
    <link rel="stylesheet" href="../css/location.css"/>
    <link rel="stylesheet" href="../css/publish_activity.css"/>
    <link href="../css/data_time/mobiscroll.2.13.2.css" rel="stylesheet" />
     <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=dab2ba81e6cf73424073bac951dba319"></script>
     <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        #loading{
            display: none;
            position: fixed;
            top: 30%;
            left: 50%;
            z-index: 122222222222;
            transform: translate(-50%,-50%);
        }
        #loading img{
            width: 1rem;
            vertical-align:middle;
        }
        #loading div{
            margin-top: 0.2rem;
            margin-left: -0.15rem;
        }
        #sure{
            bottom: 1%;
            background-color: #eeeeee;
            font-size: 0.32rem;
        }
        input[type=text]{
            padding-top: 1.8rem;
        }
        .say textarea{
            padding-top: 0.1rem;
        }
    </style>

</head>
<body>
<div id="loading">
    <img src="../img/login.gif" alt=""/>
    <div>发送中，请等待...</div>
</div>
<div class="location_alert" style="display: none">
    <header class="clearfix chat_All">
        <i class="back_pub" ></i>
        <h3 class="back_pub">所在位置</h3>
    </header>
    <div class="location_main">
        <div class="location_hidden">
            <span id="click_hidden" >不显示位置</span>
            <em id="hidden_location"></em>
        </div>
        <div id="container" class="map message" tabindex="0"></div>
        <div id='tip'>
        </div>
        <input type="hidden" id="userlocaltionid">
        <input type="hidden" id="userlocaltiontext">
        <input type="hidden" id="addresscode">
    </div>
</div>
<div class="publish_layer" style="overflow-x: hidden">
    <header class="publish_header" s>
        <i class="f_left" onclick="back()" ></i>
        <h3 class="publish">发布约单</h3>
    </header>
        <input type="text" class="style"  placeholder="请输入约单类型"/>
    <div class="say">
        <textarea name="" id="" cols="50" rows="5" placeholder="请输入约单内容"></textarea>
    </div>
    <div class="imageBox">
        <!--<a href="javascript:;" class="image">
              <img src="../img/publish_common.png" alt="" class="userImg"/>
              <span class="add_pic">点击添加图片</span>
          </a>-->
        <!--<a href="javascript:;">
          <img src="../img/publish_common.png" alt="" class="userImg"/>
          <span class="add_pic">点击添加图片</span>
      </a>
          <input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput" multiple>-->
        <div class="z_photo">
            <div class="z_file">
                <!--   <img src="../img/publish_common.png" alt="" class="userImg"/>-->
                <!--<span class="add_pic">点击添加图片</span>-->
                <input type="file" capture="camera" name="file" id="file" value=""  accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
            </div>
        </div>

        <div class="z_mask">

            <div class="z_alert">
                <p>确定要删除这张图片吗？</p>
                <p>
                    <span class="z_cancel">取消</span>
                    <span class="z_sure">确定</span>
                </p>
            </div>
        </div>
    </div>
     <div class="location">
         <img src="../img/point.png" alt=""/>
         <em class="location_info">位置</em>
     </div>
    <div class="activity_time">
        <div class="settings" style="display:none;">
            <select name="demo" id="demo">
                <option value="date">日期</option>
            </select>
        </div>
        <div class="begin_time">
            <span>开始时间</span>
            <input name="test" id="tests" class="demo-test-date demo-test-datetime demo-test-time demo-test-credit" placeholder="请设置活动开始时间" />
        </div>
        <div class="end_time">
            <span>结束时间</span>
            <input name="test" id="test" class="demo-test-date demo-test-datetime demo-test-time demo-test-credit" placeholder="请设置活动结束时间"  />
        </div>

    </div>

    <div id="sure">
        <button class="confirm">
            确定发布
        </button>
    </div>

</div>
<script src="../js/mui.min.js"></script>
<script src="../js/x_rem.js"></script>
<script src="../js/base.js"></script>
<script src="../js/data_time/jquery-1.9.1.js"></script>
<script src="../js/sweetalert2.js"></script>
<script src="../js/data_time/mobiscroll.2.13.2.js"></script>
<!--<script src="../js/jquery.js"></script>-->
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.3&key=694bf3b4b0595d121de5d1b327d5c7ba&plugin=AMap.ToolBar'></script>
<!-- UI组件库 1.0 -->
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.10"></script>
<script src="../js/location.js"></script>
<script>
    //图片上传
    var obj={};
    $(".confirm").click(function(){
       var title= $(".style").val();
        var startTime=$("#tests").val();
        startTime=new Date(startTime.replace(/-/g,"/"));
        var endTime=$("#test").val();
        endTime=new Date(endTime.replace(/-/g,"/"));
        //转换成功 图片的base64地址 很重要
        // console.log(images);
        //获取用户输入的全部内容之后 包括图片的地址  发送给后台 在进行页面的跳转
        var content=$("textarea").val() ;
        if(content!==""||images.length !==0||$(".location_info").text()!=="位置"||title!==""){
            obj.content=content;
         obj.title=title;
            obj.image= JSON.stringify(images);
            obj.startTime=startTime;
            obj.endTime=endTime;
            obj.address= $(".location_info").text();
            console.log(obj);
            $.ajax({
                //处理session每次不唯一问题
                xhrFields: {
                    withCredentials: true
                },
                //请求方式
                type:'post',
                url:baseUrl+'/partner/pushPartner',
                dataType:'json',
                data:obj,
                beforeSend:function(){
                  $("#loading").show();
                },
                success:function(data){
                    console.log(data);
                    if(data.code=="success"){
                        $("#loading").hide();
                        //alert("发表成功");
                        swal(
                                '干得漂亮！',
                                '您发表成功了！',
                                'success'
                        ).then(function(){
                                    //清除location 本地存储
                                    localStorage.removeItem("location");
                                    window.location.href="./work_sigle.html";
                                })

                    }
                },
                error:function(data){
                    console.log(data);
                }
            })
        }
        else{
            sweetAlert(
                    'sorry',
                    '记得填写内容哦！',
                    'error'
            )
        }
    })
    /*上传图片
     * */
    function imgChange(obj1, obj2) {
        //获取点击的文本框
        var file = document.getElementById("file");
        //存放图片的父级元素
        var imgContainer = document.getElementsByClassName(obj1)[0];
        //获取的图片文件
        var fileList = file.files;
        //文本框的父级元素
        var input = document.getElementsByClassName(obj2)[0];
        var imgArr = [];
        //遍历获取到得图片文件
        for (var i = 0; i < fileList.length; i++) {
            //判断上传的图片大小
            if(file.files && file.files[i]){
                var fileData = file.files[i];
                var size = fileData.size;   //注意，这里读到的是字节数
                var isAllow = false;
                if(!size) isAllow = false;
                var maxSize = 2048;
                maxSize = maxSize * 1024;   //转化为字节
                isAllow = size <= maxSize;
                if(!isAllow){
                    alert("大小超过2 M，请重新上传");
                    return false;
                }
            }
            //结束
            var imgUrl = window.URL.createObjectURL(file.files[i]);
            imgArr.push(imgUrl);
            var img = document.createElement("img");
            img.setAttribute("src", imgArr[i]);
            var imgAdd = document.createElement("div");
            imgAdd.setAttribute("class", "z_addImg");
            imgAdd.appendChild(img);
            imgContainer.appendChild(imgAdd);
            //getBase64Image(img,imgArr[i]);
        };
        //'console.log(imgArr);这个是图片的本地地址
        for(let i=0;i<imgArr.length;i++){
            (function(image, x, y,index){
                drawing(image, x, y,index)
            })(imgArr[i],0,0,i)
        }
        imgRemove();
    };
    function imgRemove() {
        var imgList = document.getElementsByClassName("z_addImg");
        var mask = document.getElementsByClassName("z_mask")[0];
        var cancel = document.getElementsByClassName("z_cancel")[0];
        var sure = document.getElementsByClassName("z_sure")[0];
        for (var j = 0; j < imgList.length; j++) {
            imgList[j].index = j;
            imgList[j].onclick = function() {
                var t = this;
                mask.style.display = "block";
                cancel.onclick = function() {
                    mask.style.display = "none";
                };
                sure.onclick = function() {
                    mask.style.display = "none";
                    t.style.display = "none";
                };
            }
        };
    };
    var container=document.querySelector(".z_photo");
    var images=[];
    function drawing(image, x, y,index) {
        var img = new Image();
        img.crossOrigin = 'anonymous';
        img.src = image;
        img.onload = function () {
            let id='canvas'+index;
            createCanvas(id,img.width,img.height);
            var cs = document.getElementById(id);
            var ctx = cs.getContext("2d");
            ctx.drawImage(img, x, y);
            var imageUrl=cs.toDataURL('', 1);
            images.push(imageUrl);
            //转换成功
            // console.log(images);
            removeDom(id);
        } ;
    }
    function createCanvas(id,width,height){
        var canvas=document.createElement("canvas");
        canvas.setAttribute('id',id);
        canvas.setAttribute('width',width);
        canvas.setAttribute('height',height);
        canvas.style.display="none";
        container.appendChild(canvas);
    }
    function removeDom(id){
        document.getElementById(id).outerHTML='';
    }
    $(".location").click(function(){
        $(".location_alert").css("display","block");
        $(".publish_layer").css("display","none");
        $(".back_pub").click(function(){
            $(".location_alert").css("display","none");
            $(".publish_layer").css("display","block");
            //获取位置
            var location_info=localStorage.getItem("location");
            if(location_info){
                $(".location_info").text(location_info.substr(3,location_info.length));
                //显示之后 清除  还有reamrk别名
                console.log(location_info);
            }else{
                $(".location_info").text("位置")
            }
        })
    })

</script>

<!--日期时间插件-->
<script type="text/javascript">
    var curr = new Date().getFullYear();
    var opt={};
    opt.date = {preset : 'date'};
    opt.datetime = {preset : 'datetime'};
    opt.time = {preset : 'time'};

    opt.default = {
        theme: 'android-holo light', //皮肤样式
        display: 'modal', //显示方式
        mode: 'scroller', //日期选择模式
        dateFormat: 'yyyy-mm-dd',
        lang: 'zh',
        showNow: true,
        nowText: "今天",
        stepMinute: 5,
        startYear: curr - 0, //开始年份
        endYear: curr + 0 //结束年份
    };
    $('.settings').bind('change', function() {
        var demo = 'datetime';
        if (!demo.match(/select/i)) {
            $('.demo-test-' + demo).val('');
        }
        $('.demo-test-' + demo).scroller('destroy').scroller($.extend(opt['datetime'], opt['default']));
        $('.demo').hide();
        $('.demo-' + demo).show();
    });
    $('#demo').trigger('change');

</script>
</body>
</html>
